<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析测试 - 在线课程平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 1200px;
        }
        .chart-box {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .analysis-box {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 1.5rem;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">课程平台</a>
            <a class="nav-link text-white" href="/analytics">返回完整分析页</a>
        </div>
    </nav>

    <div class="container mt-5">
        <h1 class="mb-4">课程数据分析测试</h1>
        <p class="text-muted mb-5">此页面用于测试课程数据可视化与AI分析功能</p>

        <!-- 控制区 -->
        <div class="mb-4">
            <button id="refreshBtn" class="btn btn-primary">
                刷新数据 <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>

        <!-- 图表展示 -->
        <div class="chart-box">
            <h3 class="mb-3">课程模块完课率图表</h3>
            <div class="text-center">
                <img id="chartImage" src="{{ chart_url }}" alt="完课率图表" class="img-fluid">
            </div>
        </div>

        <!-- AI分析结果 -->
        <div class="analysis-box">
            <h3 class="mb-3">AI分析报告</h3>
            <div id="analysisContent">
                <p>{{ analysis }}</p>
            </div>
        </div>

        <!-- 原始数据展示 -->
        <div class="mt-5">
            <h3 class="mb-3">原始数据</h3>
            <pre id="rawData" class="bg-light p-3 rounded">
{{ course_data | tojson(indent=2) }}
            </pre>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 刷新数据功能
        document.getElementById('refreshBtn').addEventListener('click', function() {
            const originalText = this.innerHTML;
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 加载中...';

            fetch('/refresh', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    // 更新图表
                    document.getElementById('chartImage').src = data.chart_url;

                    // 更新分析内容
                    document.getElementById('analysisContent').innerHTML = `<p>${data.analysis}</p>`;

                    // 更新原始数据
                    document.getElementById('rawData').textContent = JSON.stringify(data.course_data, null, 2);

                    this.innerHTML = originalText;
                })
                .catch(error => {
                    console.error('刷新失败:', error);
                    this.innerHTML = originalText;
                    alert('刷新数据失败，请重试');
                });
        });
    </script>
</body>
</html>